import { Button } from 'antd'
import { TaskOaMiddle } from '@/style/TaskOa'
import { useState, useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { getAllTaskList, getCompleteTaskList, getUnCompleteTaskList } from '@/store/taskOa/toolKit/features/taskSlice'
const Middle = () => {
	const [activeButton, setActiveButton] = useState(0);
	const dispatch = useDispatch()
	return (
		<TaskOaMiddle>
			<Button
				type={activeButton === 0 ? 'primary' : 'default'}
				onClick={() => {
					setActiveButton(0)
				}}
			>
				全部
			</Button>
			<Button
				type={activeButton === 1 ? 'primary' : 'default'}
				onClick={() => {
					setActiveButton(1)
					dispatch(getUnCompleteTaskList())
				}}
			>
				未完成
			</Button>
			<Button
				type={activeButton === 2 ? 'primary' : 'default'}
				onClick={() => {
					setActiveButton(2)
					dispatch(getCompleteTaskList())
				}}
			>
				已完成
			</Button>
		</TaskOaMiddle>
	)
}

export default Middle
